<template>
	<view class="inspect">
		<view class="form">
			<view class="form-group">
				<view class="form-item" :class="{'form-item-hor':item.type !== 'upload' && item.type !== 'addr'}" v-for="(item, index) in reportData" :key="index">
					<view class="form-item-header">{{item.label}}：</view>
					<view class="form-item-body" v-if="item.type == 'static'">
						<view class="form-control-static">{{ item.value }}</view>
					</view>
					<view class="form-item-body" v-else-if="item.type == 'addr'">
						<view class="card card-address">
							<textarea 
								v-model="item.value" 
								class="card-content" 
								placeholder="请输入或选择定位获取位置信息">
							</textarea>
							<view class="card-icon" @click="openMap">
								<image class="icon" src="@/static/icon/iv_location.png"></image>
							</view>
						</view>
					</view>
					
					<view class="form-item-body" v-else-if="item.type == 'radioGroup'">
						<radio-group class="radio-group" @change.stop.prevent="radioChange($event, item)">
							<label class="radio-item" v-for="(radio, index) in item.options" :key="index">
								<view class="radio-item-header">
									<radio :value="radio.value" :checked="radio.value === item.value" />
								</view>
								<view class="radio-item-body">{{ radio.label }}</view>
							</label>
						</radio-group>
					</view>
					
					<view class="form-item-body" v-else-if="item.type == 'upload'">
						<view class="list list-p">
							<view class="list-group">
								<view class="list-item" v-for="(baseImage, index) in item.baseImages" :key="index">
									<view class="card card-a" @tap="viewPic(item,index)">
										<view class="card-header">
										</view>
										<view class="delete" @tap.stop.prevent="delPic(index)">
											<image class="icon" mode="aspectFit" src="@/static/icon/delete-icon.png">
											</image>
										</view>
										<view class="card-body">
											<image class="icon" mode="aspectFit" :src="baseImage"></image>
										</view>
									</view>
								</view>
								
						
								<view class="list-item">
									<view class="card card-a upload" @tap="getPic(item)">
										<view class="card-body">
											<image class="icon" mode="aspectFit" src="@/static/icon/iv_pic_add.png"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<view class="btns">
			<view class="btns-group">
				<button class="btn btn-a" @tap="report">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {checkSXCB} from '@/api/configure.js';
	import { getUserInfo, deepClone ,mergeUrls,getBaseImages, previewImage, chooseImage} from '@/util/util.js';
	import { pathToBase64, base64ToPath } from '@/util/mmmm-image-tools/index.js';
	import configUrl from '@/util/url.js';
	
	export default {
		data() {
			return {
				SXCBId: '',
				region: '',
				address: '',
				lng: '',
				lat: '',
				roleKey: '',
				userName: '',
				phonenumber: '',
				userId: '',
				reportData: [{
					type: 'static',
					field: 'name',
					label: '加水点',
					value: '',
				},{
					type: 'static',
					field: 'region',
					label: '所属街办',
					value: '',
				}, {
					type: 'addr',
					field: 'address',
					label: '我的位置',
					value: '',
					lnglats: ''
				},{
					type: 'radioGroup',
					field: 'status',
					label: '状态',
					value: '0',
					options: [{
						label: '正常',
						value: '0'
					}, {
						label: '异常',
						value: '1'
					}]
				}, {
					type: 'upload',
					field: 'images',
					label: '照片',
					images: [],
					baseImages: [],
				}]
			}
		},
		methods: {
			setVal() {
				this.reportData.forEach( item => {
					if(item.field == 'name'){
						item.value = this.address;
					} else if(item.field == 'region') {
						item.value = this.region;
					} else{
						
					}
				});
				
				let userInfo = getUserInfo();
					
				if (userInfo) {
					this.roleKey = userInfo['roles'][0]['roleKey'];
					this.userName = userInfo.userName;
					this.phonenumber = userInfo.phonenumber;
					this.userId = userInfo.userId;
				}
			},
			async report(){
				let params = {
					sxcbPointId: this.SXCBId,
					createUserName: this.userName,
					createUserRole: this.roleKey,
					createUserPhone: this.phonenumber,
					createBy: this.userId
				}
				
				let status = this.reportData.find( item => item.field == 'status');
				let addr = this.reportData.find( item => item.field == 'address');
				let images = this.reportData.find( item => item.field == 'images');
				let baseImages = images.baseImages.map(item => (item.split(',')[1]))
			
				if(!addr.lnglats){
					uni.showToast({
					    title: '请选择定位获取位置信息',
					    duration: 2000,
						icon: 'none'
					});
					
					return 
				}
				
				if(!addr.value){
					uni.showToast({
					    title: '请输入位置信息',
					    duration: 2000,
						icon: 'none'
					});
					
					return 
				}
				
				if(baseImages.length == 0){
					uni.showToast({
					    title: '请上传照片',
					    duration: 2000,
						icon: 'none'
					});
					
					return 
				}
				
				let otherParams = {
					status: status.value,
					address: addr.value,
					images: baseImages.join(','),
					lng: addr.lnglats.split(' ')[0],
					lat: addr.lnglats.split(' ')[1],
				}
				
				Object.assign(params, otherParams);
				
				let {code, data} = await checkSXCB(params)
				
				if( code == 0){
					uni.$emit('fireHydrant.index.refresh');
					
					if( otherParams.status === '0'){
						uni.showToast({
						    title: '上报成功',
						    duration: 2000,
							icon: 'none'
						});
						
						setTimeout(()=> {
							this.back();
						}, 2000);
					} else {
						this.reportCase();
					}
				} 
			},
			reportCase() {
				let data = {
					lng: this.lng,
					lat: this.lat,
				}
				
				let url = mergeUrls('/pages/case/report', data);
				
				uni.navigateTo({
				    url
				});
			},
			async init() {
				this.setVal();
			},
			openMap() {
				let params = {
					gdx: this.lng,
					gdy: this.lat,
					type: "GET"
				}
				
				let url = mergeUrls('/pages/map/index', params);
				
				uni.navigateTo({url});
			},
			getLocationData({latitude, longitude, address}) {
				let addr = this.reportData.find( item => item.type == 'addr');
				
				addr.value = address;
				addr.lnglats = `${longitude} ${latitude}`;
			}, 
			radioChange(e, item) {
				let val = e.target.value;
				
				item.value = val;
			},
			async getPic(obj) {
				let res = await chooseImage().catch((err) => {});;
				
				if (res) {
					let tempFilePaths = res.tempFilePaths.slice(0);
					
					obj.images = obj.images.concat(tempFilePaths);
					
					let baseImages = await getBaseImages(tempFilePaths);
					
					obj.baseImages = obj.baseImages.concat(baseImages);
				} 
			},
			delPic(obj, index) {
				obj.images.splice(index, 1);
				obj.baseImages.splice(index, 1);
			},
			viewPic(obj, index) {
				previewImage({
					urls: obj.images,
					current: index
				})
			},
			back() {
			    uni.navigateBack({  
			        delta: 1
			    });  
			}
		},
		onLoad(option) {
			this.region = option.region;
			this.address = option.address;
			this.lng = option.lng;
			this.lat = option.lat;
			this.SXCBId = option.SXCBId;
			
			this.init();
			uni.$on('receiveLocationData', this.getLocationData);
		},
		onUnload() {
			uni.$off('receiveLocationData');
		},
		onBackPress(options) {
			let _this = this;
			
			if (options.from === 'navigateBack') {  
				return false;  
			}  
			
			uni.showModal({
			    content: '确定退出当前页面吗？',
			    success(res) {
			        if (res.confirm) {
			           _this.back();  
			        } else if (res.cancel) {
			          
			        }
			    }
			});
					   
			return true;  
		}
	}
</script>

<style lang="scss">
	.inspect{
		padding-top: 40rpx;
	}
	.form {}
	.form{
		margin-bottom: 60rpx;
		.form-group {
			padding: 0rpx 30rpx;
			.form-item {
				margin-bottom: 40rpx;
				.form-item-header {
					margin-bottom: 20rpx;
					padding: 13rpx 0rpx 13rpx 0rpx;
					font-size: 28rpx;
					line-height: 120%;
					color: #5d5d5d;
				}
	
				.form-item-body {
					padding: 0rpx 0rpx 0rpx 0rpx;
	
					.form-control {
						width: 100%;
						font-size: 24rpx;
						border-radius: 10rpx;
						line-height: 120%;
						box-sizing: border-box;
						border: 1px solid #c4c4c4;
						height: 56rpx;
						padding: 6rpx 16rpx;
					}
					
					.form-control-static{
						width: 100%;
						font-size: 24rpx;
						border-radius: 10rpx;
						line-height: 120%;
						box-sizing: border-box;
						padding: 14rpx 16rpx;
					}
				}
	
				&.form-item-hor {
					display: flex;
					.form-item-header {
						width: 140rpx;
						box-sizing: border-box;
						margin-bottom: 0rpx;
					}
	
					.form-item-body {
						padding: 0rpx 0rpx 0rpx 0rpx;
						width: calc(100% - 140rpx);
						box-sizing: border-box;
					}
				}
			}
	
			.form-item-tip {
				padding: 8rpx 0rpx;
				font-size: 28rpx;
				line-height: 120%;
				color: #d81e06;
			}
		}
	}
	
	.btns {
		background-color: #ffffff;
	
		.btns-group {
			padding: 17rpx 30rpx;
			display: flex;
	
			.btns-item {
				width: 50%;
				padding: 0rpx 10rpx;
			}
		}
	
	}
	
	.btn {
		width: 100%;
		padding: 20rpx 0px;
		font-size: 24rpx;
		line-height: 120%;
		color: #fff;
		text-align: center;
		border: none;
		border-radius: 6rpx;
		background: none;
	
		&:after {
			display: none;
		}
	
		&.btn-a {
			background-color: #f29004;
		}
	}
	
	.card {}
	
	.card-address {
		position: relative;
		top: 0rpx;
		left: 0rpx;
	
		.card-content {
			height: 120rpx;
			margin: 0rpx 100rpx 0rpx 0rpx;
			padding: 20rpx;
			font-size: 24rpx;
			border-radius: 10rpx;
			line-height: 120%;
			box-sizing: border-box;
			border: 1px solid #c4c4c4;
		}
	
		.card-icon {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			margin: 20rpx 0rpx 20rpx 10rpx;
	
			.icon {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.card-a {
		width: 223rpx;
		margin: 0rpx auto;
		border-radius: 5rpx;
		border: 1rpx solid #a2a2a2;
		position: relative;
		top: 0rpx;
		left: 0rpx;
	
		.card-body {
			height: 143rpx;
	
			.icon {
				width: 100%;
				height: 100%;
			}
		}
	
		&.upload {
			border: none;
		}
	
		.card-header {
			width: 100%;
			height: 31rpx;
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			background-color: #000000;
			opacity: 0.3;
			z-index: 2;
		}
	
		.delete {
			width: 31rpx;
			height: 31rpx;
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			z-index: 3;
			display: flex;
			justify-content: center;
			align-items: center;
	
			.icon {
				width: 20rpx;
				height: 20rpx;
			}
		}
	
	}
	
	.list {
		&.list-p {
			.list-group {
				display: flex;
				flex-wrap: wrap;
	
				.list-item {
					margin-bottom: 20rpx;
					width: 33.33%;
				}
			}
		}
	}
	
	.radio-group{
		display: flex;
		padding: 0px 10px;
		width: auto;
		.radio-item{
			display: flex;
			width: 25%;
			align-items: center;
			.radio-item-header{
				
			}
			.radio-item-body{
				padding: 0rpx 0rpx;
				font-size: 28rpx;
				color: #767676;
			}
		}
	}
</style>
